import render from './custom/previewRender.vue';
import checkRules from './custom/rule';

const layouts = {
  colItem(element, modelValue) {
    const labelWidth = element.labelWidth ? `${element.labelWidth}px` : null;
    const rules = checkRules(element);
    const { onValChange } = this.$attrs;
    if(element.compType=="radio"){
      console.log(element.disabled,"element11111111111")
      return (
        <el-col style="padding-left: 7.5px; padding-right: 7.5px;">
          <el-form-item
            label={element.showLabel ? element.label : ''}
            label-width={labelWidth}
            prop={element.id}
            rules={rules}
          >
            <el-radio-group
              key={element.id}
              modelValue={element.modelValue}
              disabled={element.disabled} // 直接绑定禁用状态
              onUpdate:modelValue={(event) => {
                element.modelValue = event;
                onValChange(element.id, event);
              }}
            >
              {element.options?.map((option) => (
                <el-radio
                  key={option.value}
                  label={option.value}
                >
                  {option.label}
                </el-radio>
              ))}
            </el-radio-group>
          </el-form-item>
        </el-col>
      );
    }
    else{
      return (
        <el-col style="padding-left: 7.5px; padding-right: 7.5px;">
          <el-form-item
            label={element.showLabel ? element.label : ''}
            label-width={labelWidth}
            prop={element.id}
            rules={rules}
          >
            <render
              key={element.id}
              conf={element}
              modelValue={element.modelValue}
              onInput={(event) => {
                element.modelValue = event;
                onValChange(element.id, event);
              }}
            />
          </el-form-item>
        </el-col>
      );
    }
  },
};

export default {
  name: 'PreviewItem',
  components: {
    render,
  },
  props: ['model', 'modelValue'],
  data() {
    return {
      eleConfig: this.model,
    };
  },
  render() {
    this.eleConfig.modelValue = this.modelValue;
    return layouts.colItem.call(this, this.eleConfig, this.modelValue);
  },
};
